<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/icon3.png" alt="">
      </div>
      <h2>报警监控</h2>
      <div class="more" @click="getMore">
        <h2>查看更多</h2>
        <img src="@/assets/img/add.png" alt="">
      </div>
    </div>
    <el-table :data="tableData" :row-style="cellStyle" stripe style="width: 100%"
      :header-cell-style="{ color: '#17E8FF' }">
      <af-table-column prop="cont1" label="报警站点">
      </af-table-column>
      <af-table-column prop="cont2" label="报警时间">
      </af-table-column>
      <af-table-column prop="cont3" label="报警级别">
      </af-table-column>
      <af-table-column prop="cont4" label="报警状态">
      </af-table-column>
    </el-table>
  </div>
</template>

<script>
import * as api from '@/assets/utils/api.js'
export default {
  props: ['titleShows'],
  data() {
    return {
      tableData: [
        // {
        //   cont1: '均合星海湾加压泵站',
        //   cont2: '2022/04/20 14:00',
        //   cont3: '紧急',
        //   cont4: '未处理'
        // },
        // {
        //   cont1: '均合星海湾加压泵站',
        //   cont2: '2022/04/20 14:00',
        //   cont3: '紧急',
        //   cont4: '已处理'
        // }, {
        //   cont1: '均合星海湾加压泵站',
        //   cont2: '2022/04/20 14:00',
        //   cont3: '紧急',
        //   cont4: '已处理'
        // }, {
        //   cont1: '均合星海湾加压泵站',
        //   cont2: '2022/04/20 14:00',
        //   cont3: '普通',
        //   cont4: '未处理'
        // }, {
        //   cont1: '均合星海湾加压泵站',
        //   cont2: '2022/04/20 14:00',
        //   cont3: '紧急',
        //   cont4: '已处理'
        // }, {
        //   cont1: '鹰潭供水公司加压泵站',
        //   cont2: '2022/04/20 14:00',
        //   cont3: '紧急',
        //   cont4: '未处理'
        // }, {
        //   cont1: '鹰潭供水公司加压泵站',
        //   cont2: '2022/04/20 14:00',
        //   cont3: '普通',
        //   cont4: '未处理'
        // }, {
        //   cont1: '鹰潭供水公司加压泵站',
        //   cont2: '2022/04/20 14:00',
        //   cont3: '紧急',
        //   cont4: '已处理'
        // }, {
        //   cont1: '鹰潭供水公司加压泵站',
        //   cont2: '2022/04/20 14:00',
        //   cont3: '紧急',
        //   cont4: '已处理'
        // }, {
        //   cont1: '鹰潭供水公司加压泵站',
        //   cont2: '2022/04/20 14:00',
        //   cont3: '紧急',
        //   cont4: '已处理'
        // }, {
        //   cont1: '鹰潭供水公司加压泵站',
        //   cont2: '2022/04/20 14:00',
        //   cont3: '紧急',
        //   cont4: '已处理'
        // }
      ],
      titleShow: this.titleShows,
      siteId: null
    }
  },
  async created() {
    this.getData(this.siteId)
  },
  methods: {
    changeData(value) {
      this.getData(value)
    },
    async getData(idNum) {
      // 接口参数
      const id = { tenantid: 1128, siteId: idNum }
      const res = await api.warning(id)
      this.data = res.data
      this.tableData = []
      this.data.forEach(item => {
        this.tableData.push({
          cont1: item.siteName,
          cont2: item.alarm_start_date,
          cont3: item.alarm_level ? '紧急': '普通', // 0为普通
          cont4: item.deal_state ? '已处理' : '未处理' // 0为已处理
        })
      })
    },
    // 点击查看更多
    getMore() {
      this.$emit('more4', 4)
    },
    //让table的字变成红色
    cellStyle(row) {
      // console.log(row.column.label, row.row.conclusion)
      let colorObj = {}
      if (row.row.cont3 == '紧急' && row.row.cont4 == '未处理') {
        colorObj.color = 'red'
      }
      if (row.row.cont3 == '普通' && row.row.cont4 == '未处理') {
        colorObj.color = 'yellow'
      }
      return colorObj
    }
  }
}
</script>

<style lang="scss" scoped>
.modular {
  .el-table {
    font-size: .16rem;
    margin-top: 0.4rem;
    padding: 0 0.1rem;
    height: 83%;
    overflow-y: scroll;
  }

}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

/* 滑块颜色 */
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: linear-gradient(-30deg,
      rgba(14, 67, 107, 0.4) 0%,
      rgba(85, 136, 238, 0.6) 100%);
}
</style>